<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          :disabled="selection.length == 0"
          @click="batchDelete()"
        ></el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input v-model="keyword" placeholder="部门名称" clearable></el-input>
          <el-button type="primary" icon="el-icon-search" @click="onSearch()"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <my-table ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column label="部门名称" prop="label" width="250"></el-table-column>
        <el-table-column label="排序" prop="sort" width="150"></el-table-column>
        <el-table-column label="状态" prop="status" width="150">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
            <el-tag v-if="scope.row.status == 0" type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="date" width="180"></el-table-column>
        <el-table-column label="备注" prop="remark" min-width="300"></el-table-column>
        <el-table-column label="操作" fixed="right" align="right" width="170">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="tableShow(scope.row, scope.$index)">查看</el-button>
              <el-button text type="primary" size="small" @click="tableEdit(scope.row, scope.$index)">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="tableDelete(scope.row, scope.$index)">
                <template #reference>
                  <el-button text type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </el-button-group>
          </template>
        </el-table-column>
      </my-table>
    </el-main>
  </el-container>
  <el-drawer v-model="drawer" direction="rtl">
    <template #header>
      <h4>修改部门</h4>
    </template>
    <template #default>
      <div></div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="() => (drawer = false)">cancel</el-button>
        <el-button type="primary" @click="onSubmit()">confirm</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import myTable from '@/components/Table/index.vue'

const selection = ref<number[]>([])

const keyword = ref<string>('')
const drawer = ref<boolean>(false)
const add = () => {
  drawer.value = true
}

// 表格搜索
const onSearch = () => {}

// 编辑
const tableEdit = (row) => {}

// 查看
const tableShow = (row) => {}

// 删除
const tableDelete = (row) => {}

// 批量删除
const batchDelete = () => {}

// 表单提交
const onSubmit = () => {}
</script>

<style></style>
